<script setup lang="tsx">
import { ModalUtil } from '/@lib/utils/modal.ts'
import { useModalStatus } from '/@lib/hooks/useModalStatus.ts'
import { useLoading } from '/@lib/hooks/useLoading.ts'
import { useForm } from '/@lib/hooks/useForm.ts'
import { sys_normal_disable } from '/@/const/Options.ts'
import { ApiSysRole } from '/@/api/system/sysRole'

const { loading, showLoading, hideLoading } = useLoading()
const { modalVisible, modalTitle, showModal, hideModal, setModalTitle } = useModalStatus()
const formRef = ref()
const { form, resetForm } = useForm({
  roleId: undefined,
  sortNum: 1,
  status: '0',
  roleName: '',
  roleKey: '',
  menuCheckStrictly: true,
  deptCheckStrictly: true,
  remark: '',
  dataScope: '1',
  menuIds: [],
  deptIds: []
})
const formRules = {
  roleName: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
  roleKey: [{ required: true, message: '权限字符不能为空', trigger: 'blur' }],
  sortNum: [{ required: true, message: '角色顺序不能为空', trigger: 'blur' }]
}
const closeCancel = () => {
  formRef.value?.resetFields()
  resetForm()
  hideModal()
}
/** 打开 Modal 操作 */
const openAdd = async () => {
  showModal()
  setModalTitle('添加角色')
}
const openEdit = async (row: any) => {
  Object.assign(form, row)
  showModal()
  setModalTitle('修改角色')
}
defineExpose({ openAdd, openEdit })
const emit = defineEmits(['submit-success'])
/** 提交按钮 */
const submitForm = async () => {
  try {
    await formRef.value?.validate()
    showLoading()
    if (form.roleId) {
      await ApiSysRole.update(form)
    } else {
      await ApiSysRole.save(form)
    }
    ModalUtil.msgSuccess('操作成功')
    emit('submit-success')
    hideModal()
  } finally {
    hideLoading()
  }
}

const formItems = ref([
  {
    prop: 'roleName',
    label: '角色名称',
    attrs: {
      placeholder: '请输入角色名称'
    }
  },
  {
    prop: 'roleKey',
    // label: '权限字符',
    label: () => (
      <span>
        <el-tooltip content="控制器中定义的权限字符，如：@SaCheckRole('admin')" placement="top">
          <el-icon>
            <question-filled />
          </el-icon>
        </el-tooltip>
        权限字符
      </span>
    ),
    attrs: {
      placeholder: '请输入权限字符，控制器中定义的权限字符，如：@SaCheckRole(\'admin\')'
    }
  },
  {
    prop: 'sortNum',
    label: '显示排序',
    slot: 'el-input-number',
    attrs: {
      placeholder: '请输入显示排序',
      min: 0
    }
  },
  {
    prop: 'status',
    label: '状态',
    slot: 'agel-radio',
    attrs: {
      border: true,
      options: sys_normal_disable
    }
  },
  {
    prop: 'remark',
    label: '备注',
    attrs: {
      placeholder: '请输入内容',
      type: 'textarea',
      rows: 2
    }
  }
])
</script>

<template>
  <!-- 添加或修改对话框 -->
  <el-dialog
    :title="modalTitle"
    v-model="modalVisible"
    width="50%"
    top="5vh"
    @close="closeCancel"
    append-to-body
    destroy-on-close
    :close-on-click-modal="false"
  >
    <el-form
      ref="formRef"
      v-loading="loading"
      :model="form"
      :rules="formRules"
      label-width="160px"
      label-position="right"
    >

      <AgelFormDesc :items="formItems" border :column="1"></AgelFormDesc>

      <!--      <el-form-item label="角色名称" prop="roleName">-->
      <!--        <el-input v-model="form.roleName" placeholder="请输入角色名称" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item prop="roleKey">-->
      <!--        <template #label>-->
      <!--            <span>-->
      <!--              <el-tooltip content="控制器中定义的权限字符，如：@SaCheckRole('admin')" placement="top">-->
      <!--                <el-icon><question-filled /></el-icon>-->
      <!--              </el-tooltip>-->
      <!--              权限字符-->
      <!--            </span>-->
      <!--        </template>-->
      <!--        <el-input v-model="form.roleKey" placeholder="请输入权限字符" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="角色顺序" prop="sortNum">-->
      <!--        <el-input-number v-model="form.sortNum" controls-position="right" :min="0" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="状态">-->
      <!--        <el-radio-group v-model="form.status">-->
      <!--          <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value" border>{{ dict.label }}</el-radio>-->
      <!--        </el-radio-group>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="备注">-->
      <!--        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" rows="2"></el-input>-->
      <!--      </el-form-item>-->

    </el-form>

    <!-- 底部按钮 -->
    <template #footer>
      <div style="display: flex; justify-content: center; width: 100%">
        <el-button @click="closeCancel">取 消</el-button>
        <el-button :loading="loading" type="primary" @click="submitForm">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss"></style>
